.user-btn:hover{
    width: 45px;
    height: 45px;
    box-shadow: 0px 10px 15px 0px #797979;
}
.first_block {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 0px 10px 15px 0px #d7d7d7;
            box-shadow: -5px -10px 5px 0px #ffffff

        }
        .input{
            border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border: #888888;
            box-shadow: 0px 5px 5px 0px #d7d7d7;
            position: relative;
            font-size: x-large;
        }
        .logo.active{

            opacity: 20%;
        }
.second_input {
    border: 3px solid #ffffff;
    width: 90%;
    height: 40px;
    font-size: larger;
    position: relative;
    background-color: #f8fffc;
    left: 3%;
    box-shadow: 2px 5px 15px 3px #d7d7d7;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.menu {
    position: absolute;
    top: 0px;
    left: 0px;
    color: #172969;
    background-color: #172969;
     width:200px;
    height:50px;
    display: inline;
    float: left;
    z-index: 10;

}
.menu.active {
    animation: long 0.5s;
    z-index: 10;
    width: 80%;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;


}
.logo:hover {
    cursor: pointer;
}

@keyframes long {
    0%{
        width: 200px;
    }
    100%{
        width: 80%;
    }
}





/*  按钮*/

.first_btn {
    color: #ffffff;
    font-size: larger;
    z-index: 10;
    width: 120px;
    height: 60px;
    border: none;
    position: absolute;
    left: 20%;
    float: left;
    display: inline-block;
    top:30%;
    cursor: pointer;


}



.second_btn {
    color: #ffffff;
    font-size: larger;
    z-index: 10;
    width: 120px;
    height: 60px;
    border: none;
    position: absolute;
    left: 40%;
    float: left;
    display: inline-block;
    top:30%;
    cursor: pointer;


}



.third_btn{
    color: #ffffff;
    font-size: larger;
    z-index: 10;
    width: 120px;
    height: 60px;
    border: none;
    position: absolute;
    left: 60%;
    float: left;
    display: inline-block;
    top:30%;
    cursor: pointer;


}



.four_btn{
    color: #ffffff;
    font-size: larger;
    z-index: 10;
    width: 120px;
    height: 60px;
    border: none;
    position: absolute;
    left: 80%;
    float: left;
    display: inline-block;
    top:30%;
    cursor: pointer;


}


.eqt_list_block{
    position: absolute;
    top: 9%;
    left: 18%;
    border: 2px solid #ffffff;
    width: 50%;
    height: 80%;
    box-shadow: 2px 5px 15px 3px #d7d7d7;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.data_pi{
     position: absolute;
    top: 9%;
    left: 70%;
    border: 2px solid #ffffff;
    width: 25%;
    height: 30%;
    box-shadow: 2px 5px 15px 3px #d7d7d7;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.data_line{
     position: absolute;
    top: 44%;
    left: 70%;
    border: 2px solid #ffffff;
    width: 25%;
    height: 45%;
    box-shadow: 2px 5px 15px 3px #d7d7d7;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


.time_line_title{
    position: absolute;
    right: 2%;
    font-size: larger;
    top: 2%;
}

.pie_title{
    position: absolute;
    right: 2%;

    top: 2%;
}